<!-- text按钮 -->
<template>
  <div class="tips-main-diag" ref="TipsRef">
    <div class="tips-main">
      <div class="tips-box" :class="type">
        <div class="tips-content">
          <span v-if="!isIcon"><img :src="iconArr[iconName]" /></span
          ><span>{{ text }}</span>
        </div>
        <div class="tips-close" @click="closeClick">
          <img src="@/assets/icon/icon_t (3).png" alt="" />
        </div>
      </div>
      <div class="tips-turn-down" v-if="isArgument">
        <div class="tips-text-turn-down">
          <Input type="textarea" :rows="6" v-model="tipsValue" />
        </div>
        <div class="tips-footer">
          <BtnBox
            isIcon
            type="light-blue"
            :text="cancelText"
            @BtnClick="closeClick()"
          />
          <BtnBox isIcon :text="sumbitText" @BtnClick="btnSubimt()" />
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import icon_1 from "@/assets/icon/icon_t (2).png";
import icon_2 from "@/assets/icon/icon_t (6).png";

export default {
  name: "btn-tips",
  props: {
    handleSubmit: Function,
  },
  data() {
    return {
      iconArr: {
        icon_1, // 搜搜
        icon_2, // 重置
      },
      type: "primary",
      text: "审核已通过",
      cancelText: "取消",
      sumbitText: "提交",
      isIcon: false,
      iconName: "icon_1",
      tipsValue: "",
      isArgument: false, // 默认不显示
    };
  },
  methods: {
    closeClick() {
      this.$refs.TipsRef.remove();
      this.handleSubmit();
    },
    async btnSubimt() {
      if (this.isArgument && !this.tipsValue) {
        return this.$Message.error("请输入拒绝理由！");
      }
      console.log(this.isArgument, !this.tipsValue,'432432')
      this.sumbitText = "提交中...";
      this.handleSubmit(this.$refs.TipsRef, this.tipsValue);
    },
  },
  mounted() {
    console.log(this.$props);
  },
};
</script>

<style lang="less" scoped>
.tips-main-diag {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tips-main {
  padding: 20px;
  width: 480px;
  background: #fff;
  border-radius: 9px;
}
.tips-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    display: block;
    margin-right: 5px;
  }
}

.tips-content {
  display: flex;
  align-items: center;
}

.tips-close {
  cursor: pointer;
}
.tips-footer {
  display: flex;
  justify-content: center;
  .btn-box-main {
    margin: 0 10px;
  }
}
.tips-text-turn-down {
  margin: 20px 0;
}
</style>
